<%@ include file="/WEB-INF/jsp/include.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<html>
<head>
	<title>GSFord : Geo-Social Notification System</title>
	<script type="text/javascript"
		src="http://maps.googleapis.com/maps/api/js?sensor=true">
	</script>
	
    <script type="text/javascript">
    var geocoder = null;
    var map;
    var marker1;
    var marker2;
    var infoWindow = new google.maps.InfoWindow;

    function initialize(lat, lng, name) {
	var _lat;
	var _lng;
	var _zoom;

	geocoder = new google.maps.Geocoder();

	if( name.length > 2 ){
		_lat = lat;
		_lng = lng;
		_zoom = 16;
	}
	else{
		_lat = 33.618882;
		_lng = -117.873373;
		_zoom = 10;
	}

	var myLatlng = new google.maps.LatLng(_lat,_lng);

	var _lat2 = _lat + 0.1;
	var _lng2 = _lng + 0.1;
	var myLatlng2 = new google.maps.LatLng(_lat2 , _lng2);

	var myOptions ={
		zoom : _zoom,
		center : myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

		marker1 = new google.maps.Marker({
      			position: myLatlng, 
			draggable: true,
      			map: map, 
      			title: 'Left-Bottom' 
  		});

 		marker2= new google.maps.Marker({
      			position: myLatlng2, 
			draggable: true,
      			map: map, 
      			title: 'Right-Top'
  		});

		google.maps.event.addListener(marker1,'dragend',this.flushPosition );
		google.maps.event.addListener(marker2,'dragend',this.flushPosition );

		google.maps.event.addListener(marker1,'click',this.onMarkerClick );
		google.maps.event.addListener(marker2,'click',this.onMarkerClick );

		google.maps.event.addListener(marker1, 'drag', this.redraw);
        	google.maps.event.addListener(marker2, 'drag', this.redraw);

		// Create a new Rectangle overlay and place it on the map.  Size
        	// will be determined by the LatLngBounds based on the two Marker
        	// positions.
        	rectangle = new google.maps.Rectangle({
          		map: map
        	});
        	redraw();

        	 // initialize maker position
            document.getElementById('lblatitude').value = marker1.getPosition().lat();
            document.getElementById('lblongitude').value = marker1.getPosition().lng();
            
            document.getElementById('rtlatitude').value = marker2.getPosition().lat();
            document.getElementById('rtlongitude').value = marker2.getPosition().lng();
	}

	function onMarkerClick() {
		var marker = this;
		var latLng = marker.getPosition();
			
		infoWindow.setContent('<h3>[' + marker.getTitle() +'] Marker position:</h3>' + latLng.lat() + ', ' + latLng.lng());
		infoWindow.open(map, marker);
	}

	function flushPosition(){
		var marker = this;
		var latLng = marker.getPosition();
			
		if( marker.getTitle() == 'Left-Bottom' ){
        	document.getElementById('lblatitude').value = latLng.lat();
        	document.getElementById('lblongitude').value = latLng.lng();
		}
		else if( marker.getTitle() == 'Right-Top'){
        	document.getElementById('rtlatitude').value = latLng.lat();
        	document.getElementById('rtlongitude').value = latLng.lng();
		}
	}

	/**
     * Updates the Rectangle's bounds to resize its dimensions.
     */
     function redraw() {
        var latLngBounds = new google.maps.LatLngBounds(
          marker1.getPosition(),
          marker2.getPosition()
        );
        rectangle.setBounds(latLngBounds);
      }
    </script>
</head>

<body onload="initialize(0,0,0)" onunload="GUnload()" >    
	<div class="section">
		<h1>Trigger a Regional GeoSocial Notification</h1>
		<p>(1) Select a interesting region by using two markers on the map</p> 
		<p>(2) Specify the message including event type, location, and detail descriptions. </p>
		<p> CAUTION : Every triggered notification will be stored and monitored!! </p>
		
		<div id="map_canvas" style="width: 600px; height: 400px"></div>
        <br/>
    	<form:form method="post" commandName="gsfordEvent">
		<h4>Region:</h4>
		left-bottom latitude: <form:input path="lblatitude"  id="lblatitude"/><br/>
		left-bottom longitude: <form:input path="lblongitude" id="lblongitude"/>
		<br/><br/>
		right-top latitude: <form:input path="rtlatitude"  id="rtlatitude"/><br/>
		right-top longitude: <form:input path="rtlongitude" id="rtlongitude"/>
		<br/><br/>
		<h4>Message:</h4>
		<form:textarea path="message" rows="4" cols="45"/>		
      	<br/><br/>
      	<input type="submit" value="Continue" />	
		<input type="button" value="Cancel" onClick="javascript:window.location='gsfordtest.htm'">
		</form:form>      	
	</div>      	
</body>
</html>
